/* //源插件
import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { NumberDivide, DateDiff, FormatnumberZero, Mover, DateStamp } from '@/function.js'

//视图插件
import {BackTop, Empty, Spin, Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message, Badge, Divider, Steps, Radio, Upload,} from 'antd';

//外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Loading from '@/components/Loading/Loading';

//css OR less预编译器
import styles from './All.less';

//图片

/!**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 *!/

@connect(({history, loading}) => ({
  history,
  loading: loading.models.historyRule,
}))
@Form.create()

class OptionHistoryOrder extends PureComponent {

  componentWillMount() {

  }

  /!**
   *  Describe:当前状态
   *  Created by xjc on 2019/5/15
   *!/

  state = {
    listLoading:false,//加载状态
    selectedRows: [],//选择行
    formValues: {
      num: 10,
      page: 1
    },//表格参数
    /!*pageValues:{current: 1, pageSize: 10, total: 0},*!/
    OptionsDetailVisible:false,//modal开关
    OptionVisible:false,//modal开关
    record:{},//当前行内容
    searchText: '',//搜索内容
    columns: [],//表头处理结果
    currentDataSource: [],//表剩余数据
    Beta:'',
    BetaDate:'',
  };


  /!**
   *  Describe:本地搜索
   *  Created by xjc on 2019/6/4
   *!/

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 80, marginRight: 8 }}
        >
          搜索
        </Button>
        <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 80 }}>
          重置
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" style={{ color: filtered ? '#1880ff' : '#181816',fontWeight:'700' }} />
    ),
    onFilter: (value, record) =>{
      if(record[dataIndex]==='合计'){
        return true;
      }else{
        return record[dataIndex]===null?'':record[dataIndex]
          .toString()
          .toLowerCase()
          .includes(value.toLowerCase())
      }
    },
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: text => (
      <span>{text}</span>
    ),
  });

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ searchText: '' });
  };


  getColumns() {
    const { history:{optionsFilters:{uploader}} } = this.props;
    let uploaderFilters = uploader.map((i) => {
      return {text: i, value: i,}
    });
    return  [
      /!*{
        title: '编号',
        dataIndex: 'id',
        align: 'center',
        width:60,
        sorter: (a, b) => a.id - b.id,
      },*!/
      {
        title: '期权代码',
        dataIndex: 'code',
        width:80,
        align: 'center',
        sorter:(a, b) => {
          if(record[dataIndex]==='合计'){
            return false;
          }else {
            let c = [a.code, b.code].sort();
            if (c[0] === a.code) {
              return 1;
            } else {
              return -1;
            }
          }
        },
        ...this.getColumnSearchProps('code'),
      },
      {
        title: '交易日',
        width:80,
        dataIndex: 'date',
        align: 'center',
        sorter: (a, b) => DateStamp(a.date ) - DateStamp(b.date ),
        render: (value, row, index) => {
          return <span >{typeof value === 'string'?value.split(' ')[0]:''}</span>
        }
      },
      {
        title: '操作类型',
        dataIndex: 'type',
        width:60,
        align: 'center',
        filters: [
          {
            text: 'SP',
            value: '1',
          },{
            text: 'SC',
            value: '2',
          },{
            text: 'BP',
            value: '3',
          },{
            text: 'BC',
            value: '4',
          },
        ],
        onFilter: (value, record) => {
          if (record.type!==undefined){
            return record.type.toString().indexOf(value) === 0
          }
        },
        render: (value, row, index) => {
          return <span>{ value===1? 'SP' :  value===2? 'SC' : value===3? 'BP' : value===4? 'BC' : null}</span>
        }
      },
      {
        title: '到期日',
        width:80,
        dataIndex: 'expiriration',
        align: 'center',
        sorter: (a, b) => DateStamp(a.expiriration) - DateStamp(b.expiriration),
        render: (value, row, index) => {
          return <span >{typeof value === 'string'?value.split(' ')[0]:''}</span>
        }
      },
      {
        title: '执行价',
        width:80,
        dataIndex: 'stikeprice',
        align: 'center',
        sorter: (a, b) => a.stikeprice - b.stikeprice,
      },
      {
        title: '成交价',
        width:80,
        dataIndex: 'premium',
        align: 'center',
        sorter: (a, b) => a.premium - b.premium,
      },
      {
        title: '合约数',
        width:80,
        dataIndex: 'contracts',
        align: 'center',
        sorter: (a, b) => a.contracts - b.contracts,
      },
      {
        title: '总权利金',
        width:80,
        dataIndex: 'totalpremium',
        align: 'center',
        sorter: (a, b) =>   {
          if(record[dataIndex]==='合计'){
            return -1;
          }else {
            return a.totalpremium - b.totalpremium
        }
        },
      },
      {
        title: '敞口',
        width:80,
        dataIndex: 'openpotential',
        align: 'center',
        sorter: (a, b) => a.openpotential - b.openpotential,
      },
      {
        title: '所属人',
        width:80,
        dataIndex: 'uploader',
        align: 'center',
        filters: uploaderFilters,
        onFilter: (value, record) => {
          return record.uploader === null ? false : record.uploader.includes(value)
        },
      },

      /!*{
        title: '市场价',
        dataIndex: 'marketprice',
        align: 'center',
        width:80,
        sorter: (a, b) => a.marketprice - b.marketprice,
      }, *!/




    ]
  }

  handleStandardTableChange = (pagination, filtersArg, sorter, extra) => {
    const {dispatch} = this.props;
    const {formValues} = this.state;
    this.setState({
      currentDataSource: extra.currentDataSource
    });
    /!*导入列表数据*!/
    dispatch({
      type: 'history/GetOptionHistoryOrder',
      payload: {
        stock:this.state.Beta,
        date:this.state.BetaDate,
        currentDataSource: extra.currentDataSource
      },
      callback: (res) => {
        this.setState({
          currentDataSource:res.list
        })
      }
    });
  };

  onSelectType(e) {
    this.setState({
      Beta: e.target.value,
    })
  }
  onSelectTime(e) {
    this.setState({
      BetaDate: e._d
    })
  }

  handleKeyPress(e, key) {
    if (e.key === 'Enter') {
      this.searchBeta(e, key);
    }
  }

  searchBeta() {

    const {dispatch} = this.props;
    dispatch({
      type: 'history/GetOptionHistoryOrder',
      payload: {
        stock:this.state.Beta,
        date:this.state.BetaDate,
        currentDataSource: this.state.currentDataSource
      },
      callback:(res) => {
        this.setState({
          BetaDate: res.data
        })
      },
    })
    ;
  }

  /!**
   *  Describe:视图
   *  Created by xjc on 2019/5/15
   *!/

  render() {
    const { loading, history:{options} } = this.props;
    const { listLoading, selectedRows, record, OptionsDetailVisible, OptionVisible} = this.state;
    let columns = [];
    let optionsList = [];
    if(columns.length===0&&options.code === 1 ){
      columns = this.getColumns();
    }
    return (
      <PageHeaderWrapper title="期权历史订单回报">
        <Card>
          <Row>
            <Col md={24} sm={24}>
              输入股票代码：<Input style={{width: 240,margin:8}} onChange={this.onSelectType.bind(this)} onKeyPress={e => this.handleKeyPress(e, record.key)}/>
              &nbsp;&nbsp;&nbsp;选择时间：<DatePicker
              showTime
              placeholder="请选择"
              format="YYYY-MM-DD"
              style={{ width: 240,margin: 8 }}
              onOk={this.onSelectTime.bind(this)}
              onKeyPress={e => this.handleKeyPress(e, record.key)}
            />
              <Button onClick={this.searchBeta.bind(this)} style={{margin:8}} type="primary">搜索</Button>
            </Col>
          </Row>
          {
            options.code === 0 ?
              <Loading/>:
              <div>
                <div style={{ margin:8,fontSize:'1rem'}}>共计：{this.state.currentDataSource.length}</div>
                <StandardTable
                  bordered={true}
                  selectedRows={selectedRows}
                  loading={listLoading}
                  data={options}
                  columns={columns}
                  style={{tableLayout:'fixed'}}
                  className={styles.TableLayout}
                  pagination={false}
                  onChange={this.handleStandardTableChange}
                  scroll={{x:1400,y:618}}
                   rowClassName={(record, index) =>
                     record.code === '合计'? styles.statisticssTableBackground : styles.ffffff
                   }
                  // rowKey="id"
                />
              </div>
          }
        </Card>
      </PageHeaderWrapper>
    );
  };

  componentDidMount() {
    const {dispatch} = this.props;

    /!*导入列表数据*!/
    dispatch({
      type: 'history/GetOptionHistoryOrder',
      payload: {
        stock:this.state.Beta,
        date:this.state.BetaDate,
        currentDataSource: this.state.currentDataSource
      },
      callback: (res) => {
        this.setState({
          currentDataSource:res.list
        })
      }
    });

  }

  componentWillUnmount(){

  }

}

export default OptionHistoryOrder; */
// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';

// 视图插件
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';

// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ history, loading }) => ({
  history,
  loading: loading.models.historyRule,
}))
@Form.create()
class OptionHistoryOrder extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
    Beta: '',
    BetaDate: '',
  };

  dataSourcechange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'history/GetOptionHistoryOrder',
      payload: {
        stock: this.state.Beta,
        date: this.state.BetaDate,
        currentDataSource: this.state.currentDataSource,
      },
      callback: res => {
        that.setState({
          dataSource: {
            title: '期权历史订单回报',
            code: 1,
            data: res.list,
            total: ['totalpremium'],
            paging: true,
            columns: [
              {
                title: '期权代码',
                dataIndex: 'code',
                type: 'string',
                width: 80,
                sorter: true,
                search: true,
              },
              {
                title: '交易日',
                width: 80,
                dataIndex: 'date',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '操作类型',
                dataIndex: 'type',
                type: 'number',
                width: 60,
                filters: [
                  {
                    text: 'SP',
                    value: '1',
                  },
                  {
                    text: 'SC',
                    value: '2',
                  },
                  {
                    text: 'BP',
                    value: '3',
                  },
                  {
                    text: 'BC',
                    value: '4',
                  },
                ],
                // onFilter: (value, record) => {
                //   if (record.type!==undefined){
                //     return record.type.toString().indexOf(value) === 0
                //   }
                // },
                render: (value, row, index) => {
                  return (
                    <span>
                      {value === 1
                        ? 'SP'
                        : value === 2
                        ? 'SC'
                        : value === 3
                        ? 'BP'
                        : value === 4
                        ? 'BC'
                        : null}
                    </span>
                  );
                },
              },
              {
                title: '到期日',
                width: 80,
                dataIndex: 'expiriration',
                type: 'date',
                search: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '执行价',
                width: 80,
                dataIndex: 'stikeprice',
                type: 'number',
                search: true,
              },
              {
                title: '成交价',
                width: 80,
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: '合约数',
                width: 80,
                dataIndex: 'contracts',
                type: 'number',
                sorter: true,
              },
              {
                title: '总权利金',
                width: 80,
                dataIndex: 'totalpremium',
                type: 'number',
                sorter: true,
              },
              {
                title: '敞口',
                width: 80,
                dataIndex: 'openpotential',
                type: 'number',
                sorter: true,
              },
              {
                title: '所属人',
                width: 80,
                dataIndex: 'uploader',
                type: 'string',
                filterAuto: true,
                // sorter: true,
              },
              {
                title: '是否成交',
                dataIndex: 'turnflag',
                width: 80,
                render: text => <span>{text ? '成交' : '-'}</span>,
              },
            ],
          },
        });
      },
    });
  }

  onSelectType(e) {
    this.setState({
      Beta: e.target.value,
    });
  }

  onSelectTime(e) {
    this.setState({
      BetaDate: e._d,
    });
  }

  handleKeyPress(e, key) {
    if (e.key === 'Enter') {
      this.searchBeta(e, key);
    }
  }

  searchBeta() {
    const { dispatch } = this.props;
    dispatch({
      type: 'history/GetOptionHistoryOrder',
      payload: {
        stock: this.state.Beta,
        date: this.state.BetaDate,
      },
      callback: res => {
        this.dataSourcechange();
      },
    });
  }

  render() {
    const { record } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Row>
            <Col md={24} sm={24}>
              输入股票代码：
              <Input
                style={{ width: 200, margin: 4 }}
                onChange={this.onSelectType.bind(this)}
                onKeyPress={e => this.handleKeyPress(e, record)}
              />
              &nbsp;&nbsp;&nbsp;&nbsp; 选择时间：
              <DatePicker
                // showTime
                placeholder="请选择"
                format="YYYY-MM-DD"
                style={{ width: 200, margin: 4, marginBottom: 30 }}
                onChange={this.onSelectTime.bind(this)}
                onKeyPress={e => this.handleKeyPress(e, record.key)}
              />
              <Button onClick={this.searchBeta.bind(this)} style={{ margin: 4 }} type="primary">
                搜索
              </Button>
            </Col>
          </Row>
          <StandardTablePro dataSource={this.state.dataSource} />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourcechange();
  }

  componentWillUnmount() {}
}

export default OptionHistoryOrder;
